<%- include('header') %>
<head>
    <link href="/css/style.css" rel="stylesheet">
    <script>
        function work(url,btn,label) {
            document.getElementById(btn).remove();
            const lb = document.getElementById(label);
            lb.innerText="正在操作……"
            fetch(url).then(res=>{
                lb.innerText="操作已执行. 将在1秒后自动刷新以查看结果."
                setTimeout(()=>location.reload(),1000);
            });
        }
        function disconnect(){
            work("/api/disconnect","btnCon","labelcon");
        }
        function connect(){
            work("/api/connect","btnCon","labelcon");
        }
        function startpush() {
            work("/api/push_start","btnPush","labelpush");
        }
        function stoppush() {
            work("/api/push_stop","btnPush","labelpush");
        }
    </script>
</head>
<div class="container">
    <h4>操作</h4>
    <table>
        <tr><td>连接状态: </td>
            <% if(connected) { %>
                <td id="labelcon" class="text-success">已连接</td>
                <td><a href="javascript:disconnect()" id="btnCon" class="btn btn-danger btn-sm">断开</a></td>
            <%} else { %>
                <td id="labelcon" class="text-danger">未连接</td>
                <td><a href="javascript:connect()" id="btnCon" class="btn btn-success btn-sm">连接</a></td>
                <% if(nexttry>0) {%>
                    <td>下次尝试: </td>
                    <td><%=new Date(nexttry)%></td>
                <% } %>
            <%} %>
        </tr>
        <tr><td>推流状态: </td>
            <% if(pushing) { %>
                <td id="labelpush" class="text-success">已运行</td>
                <td><a href="javascript:stoppush()" id="btnPush" class="btn btn-danger btn-sm">断开</a></td>
            <%} else { %>
                <td id="labelpush" class="text-danger">未运行</td>
                <td><a href="javascript:startpush()" id="btnPush" class="btn btn-success btn-sm">连接</a></td>
            <%} %>
        </tr>
    </table>
    <h4>通用</h4>
    <form>
        <div class="form-group">
            <label for="server">服务器WebScoket地址</label>
            <input type="text" class="form-control" id="server" placeholder="地址" value="<%=server%>"/>
        </div>
        <div class="form-group">
            <label for="server">客户端ID</label>
            <input type="text" class="form-control" id="id" placeholder="ID" value="<%=id%>"/>
        </div>
        <div class="form-group">
            <label for="server">客户端Key</label>
            <input type="text" class="form-control" id="key" placeholder="Key" value="<%=key%>"/>
        </div>
        <div class="form-group">
            <label for="pusher">推流命令</label>
            <input type="text" class="form-control" id="pusher" placeholder="命令" value="<%=pusher%>"/>
        </div>
        <div class="form-group">
            <a href="javascript:submit_general()" class="btn btn-primary">保存</a>
            <p id="setak_tip" style="display:none"></p>
        </div>
    </form>
    <h4>账户信息</h4>
    <a class="btn btn-primary" href="#" data-toggle="modal" data-target="#chpwd">修改密码</a>
    <div class="modal fade" id="chpwd" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">修改密码</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>旧密码</label>
                        <input type="password" name="opwd" class="form-control" id="opwd" placeholder="旧密码"/>
                    </div>
                    <div class="form-group">
                        <label>新密码</label>
                        <input type="password" name="npwd" class="form-control" id="npwd" placeholder="新密码"/>
                    </div>
                    <div class="form-group">
                        <label>再次输入新密码</label>
                        <input type="password" name="cpwd" class="form-control" id="cpwd" placeholder="重复新密码"/>
                    </div>
                    <div class="form-group" id="chpwd_blank" style="display:none">
                        <p class="text-danger">请填写所有内容</p>
                    </div>
                    <div class="form-group" id="chpwd_repeat" style="display:none">
                        <p class="text-danger">新密码不能与旧密码相同</p>
                    </div>
                    <div class="form-group" id="chpwd_incon" style="display:none">
                        <p class="text-danger">新密码两次输入不一致</p>
                    </div>
                    <div class="form-group" id="chpwd_short" style="display:none">
                        <p class="text-danger">新密码太短, 至少要8位</p>
                    </div>
                    <div class="form-group" id="chpwd_ok" style="display:none">
                        <p class="text-success">密码修改成功</p>
                    </div>
                    <div class="form-group" id="chpwd_fail" style="display:none">
                        <p class="text-danger">旧密码错误</p>
                    </div>
                    <div class="form-group" id="chpwd_uke" style="display:none">
                        <p class="text-danger">内部错误，请稍后重试</p>
                    </div>
                </div>
                <div class="modal-footer">
                    <a href="javascript:submit_chpwd();" class="btn btn-primary">提交</a>
                    <a class="btn btn-default" href="javascript:void(0);" data-dismiss="modal">取消</a>
                </div>
            </div>
        </div>
    </div> 
    <script src="/js/general.js"></script>
    <script src="/js/chpwd.js"></script>
</div>
<%- include('footer') %>